
<template>
  <!-- 考核填报 -->
  <div class="app-container">
    <el-card>
      <el-button
        type="warning"
        @click="tuiCchuEquipment()"
        style="
        margin-right:15px;
        color: #fff;
      border-radius:4px
      height: 32px;
      line-height: 6px;
      margin-bottom: 10px;
      "
      >退出填报</el-button>
      <h3 style="text-align: center; font-size: 20px">{{this.messageList.name}}</h3>

      <!--  ref="ruleForm"  model="ruleForm" -->
      <el-form
        :inline="true"
        class="demo-form-inline"
        style="text-align: center"
        ref="ruleForm"
        :model="ruleForm"
      >
        <!-- 年度--季度下拉框 -->
        <el-row style="margin-top: 0px">
          <el-form-item>
            <span style="margin-right: 15px;font-weight: 800; font-size: 8px">年份</span>
            <el-select
              placeholder="请选择"
              style="width:  140px;"
              v-model="ruleForm.years"
              :readonly="true"
            ></el-select>
            <!-- <span style="margin-left: 15px;font-weight: 800; font-size: 8px">年</span> -->
          </el-form-item>
          <el-form-item>
            <span
              style="margin-right: 15px;margin-left: 15px;font-weight: 800; font-size: 8px"
            >{{ this.messageList.assessTemplatePeriod==1?'月度': this.messageList.assessTemplatePeriod==2? '季度' : "年度"}}</span>
            <el-select
              placeholder="请选择"
              style="width:  140px;"
              v-model="ruleForm.linear"
              :readonly="true"
            ></el-select>
          </el-form-item>
        </el-row>
        <!-- 部门-填报时间-姓名-性别-职务 -->
        <el-row style="margin-top: -10px">
          <el-form-item>
            <span style="margin-right: 10px;font-weight: 800; font-size: 8px">部门</span>
            <el-select
              :readonly="true"
              placeholder="请选择"
              style="width: 140px; margin-right: 15px"
              v-model="ruleForm.department"
            ></el-select>
          </el-form-item>
          <el-form-item>
            <span style="margin-right: 10px;font-weight: 800; font-size: 8px">填报时间</span>
            <el-select
              :readonly="true"
              placeholder="请选择"
              style="width: 140px; margin-right: 15px"
              v-model="ruleForm.times"
            ></el-select>
          </el-form-item>
          <el-form-item>
            <span style="margin-right: 10px;font-weight: 800; font-size: 8px">姓名</span>
            <el-select
              :readonly="true"
              placeholder="请选择"
              style="width:  140px;; margin-right: 15px"
              v-model="ruleForm.names"
            ></el-select>
          </el-form-item>
          <el-form-item>
            <span style="margin-right: 10px; font-weight: 800;font-size: 8px">性别</span>
            <el-select
              :readonly="true"
              placeholder="请选择"
              style="width:  140px;; margin-right: 15px"
              v-model="ruleForm.sexs"
            ></el-select>
          </el-form-item>
          <el-form-item>
            <span style="margin-right: 10px;font-weight: 800; font-size: 8px">职务</span>
            <el-select
              placeholder="请选择"
              style="width: 140px"
              v-model="ruleForm.works"
              :readonly="true"
            ></el-select>
          </el-form-item>
        </el-row>
        <!-- 工作实绩 -->
        <el-row
          style="margin-left:8%;"
          v-for="item in this.dataTypesTemp.val.contentDto.normDtoList"
          :key="item.index"
        >
          <div style="font-size: 14px; text-align: start; display: flex;">
            <span
              style="display: block;
                margin-top: 0px;
                margin-right: 3px;
                 width: 4px;
                 height: 18px;
                 background-color: blue;
                "
            ></span>
            <span style="font-weight: 800;font-size:18px">{{ item.name }}</span>
          </div>
          <el-row style="display:flex;align-items:center;overflow:auto;width:92.6%">
            <el-form-item
              :style="item.latitudeBeans.length == 1?'width:100%' : 'width:100%'"
              style="display:flex; flex-direction: column;height:auto;margin-top:1%;margin-right:0.7%"
              v-for="(items, index) in item.latitudeBeans"
              :label="items.name"
              align="center"
              prop="assessorUserType"
            >
              <el-input
                type="textarea"
                :style="item.latitudeBeans.length == 1?'width:100%' : 'width:100%'"
                style="margin-top:1%;"
                :rows="item.latitudeBeans.length == 1?10:gaoDu"
                v-for="res in items.content"
                v-model="res.specificContent"
                placeholder="请填写..."
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row style="border:0;margin-right:8%;margin-top:-1.5%">
            <el-col style="text-align:center;">
              <el-button
                v-if="item.num!==1"
                :disabled="isdisabled"
                style="width:80px; position: relative;height:36px;"
                @click="applayaddRow(item.latitudeBeans,item)"
              >+</el-button>
              <el-button
                v-if="item.num!==1"
                @click.native.prevent="applaydeleteRow(item.latitudeBeans,item)"
                :disabled="isdisabled"
                style="width:80px; position: relative;height:36px;"
              >-</el-button>
            </el-col>
          </el-row>
        </el-row>

        <el-row style="margin-top:8%">
          <el-form-item>
            <el-button
              @click="closeTargets('ruleForm')"
              style=" color: #000; margin-bottom: 5px;"
            >取消</el-button>
            <el-button
              @click="addTargets('ruleForm')"
              style=" background-color: rgb(76 106 248);color: #fff;margin-bottom: 5px;"
            >提交</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
    
    <script>
import { getUsersMUban, putTianBao, getUserId } from "@/api2/kaohe";
export default {
  props: ["dataTypes"],
  data() {
    return {
      showContents: false,
      isdisabled: false,
      greade: "",
      content: {
        num: "",
        specificContent: ""
      },
      gaoDu: 5,
      userIds: "",
      formLabelWidth: "80px", //label-width
      deleteStyle: true, //删除维度按钮显示隐藏
      // 分页属性定义如下{
      // }
      //表格数据数组
      tableData: [],
      nums: 2,
      applayList: [],
      latitudeBeansd: [],
      assessTemplateId: "",
      tableColumns: { list: [], header: [] }, //维度数组
      //弹层数组
      ruleForm: {
        department: "",
        times: "",
        names: "",
        sexs: "",
        works: "",
        greade: "",
        years: "",
        linear: "",
        norms: [],
        message: "", //意见
        assessorUserType: "", //被考核人类型
        //维度
        dynamicItem: [
          {
            key: "1",
            name: "",
            content: ""
          }
        ]
      },
      ID: "",
      // 重新赋值，避免破坏原数据
      dataTypesTemp: this.dataTypes,
      gettime: "", //当前时间
      messageList: [],
      tableData1: [],
      messageList1: [],
      tableDatadialog: [], //表格数据
      centerDialogVisible: true
    };
  },
  watch: {
    gaoDu(newVal, oldVal) {
      console.log("1321321321", newVal, oldVal);
    }
  },

  computed: {
    //序列处理，递增，删除的序列数，不会再出现
  },
  mounted() {
    this.getUserIds();
    this.nowtime();

    // this.currentTime();
  },
  methods: {
    rowClass({ rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return { background: "#DDDDDD" };
      }
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === "name") {
        return {
          color: "#3B95FF",
          fontWeight: "800"
        };
      }
    },
    //添加表格里的行(申请状态)
    applayaddRow(list, data) {
      console.log(list, data);
      if (data.num == -1) {
        list.forEach(item => {
          console.log(item.content);
          item.content.push({ num: "", specificContent: "" });
        });
      } else {
        if (this.nums > data.num) {
          this.$message.error("最多添加" + data.num + "行");
          return;
        }
        this.nums++;
        list.forEach(item => {
          console.log(item.content);
          item.content.push({ num: "", specificContent: "" });
        });
        console.log(this.nums);
      }

      console.log(list);
      // console.log(this.applayList);
      // list.push({ num: "", specificContent: "" });
    },
    //删除表格里的行(申请状态)
    applaydeleteRow(rows, data) {
      if (data.num == -1) {
        rows.forEach(item => {
          console.log(item);
          if (item.content.length == 1) {
            return;
          } else {
            item.content.splice(item.content.length - 1, 1);
          }
        });
      } else {
        rows.forEach(item => {
          console.log(item);
          if (item.content.length == 1) {
            this.nums = item.content.length + 1;
            return;
          } else {
            item.content.splice(item.content.length - 1, 1);
            this.nums = item.content.length + 1;
          }
        });
      }
      console.log(rows);

      // if (rows.length == 1) {
      //   this.$message.error("至少保留一行!");
      // } else {
      //   rows.splice(index, 1);
      // }
      // rows.splice(index, 1);
    },
    //获取用户基本信息
    getUserIds() {
      setTimeout(() => {
        getUserId()
          .then(res => {
            if (res.code == 0) {
              this.userIds = res.data.id;
              this.lookMuBan(res.data); //获取表格数据
            } else {
              console.log(error);
            }
          })
          .catch(e => {
            console.log(e);
          });
      }, 500);
    },
    closeTargets() {
      this.$confirm(
        "确定退出" + "《" + this.messageList.name + "》" + "的填报吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.$message({
            type: "success",
            message: "已退出!"
          });
          this.$emit("giveFather");
          // this.dataTypes = { val, index };
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    tuiCchuEquipment() {
      this.$confirm(
        "确定退出" + "《" + this.messageList.name + "》" + "的填报吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.$message({
            type: "success",
            message: "已退出!"
          });
          this.$emit("giveFather");
          // this.dataTypes = { val, index };
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    nowtime() {
      let nowDate = new Date();
      let date = {
        // 获取当前年份
        year: nowDate.getFullYear(),
        //获取当前月份
        month: nowDate.getMonth() + 1,
        //获取当前日期
        date: nowDate.getDate()
      };
      this.ruleForm.years = date.year;
      this.ruleForm.times = date.year + "-" + date.month + "-" + date.date;
    },
    // inputVal(e) {
    //   console.log(e);
    // },
    //获取模板数据
    async lookMuBan(VAL) {
      // console.log(VAL);
      this.ID = VAL.id;
      console.log(this.dataTypesTemp.val.contentDto);
      let id = this.dataTypesTemp.val.id;

      //   const type = this.dataTypesTemp.index;

      // this.messageList1 = this.dataTypesTemp.val;
      this.ruleForm.linear = this.dataTypesTemp.val.period;
      this.ruleForm.department = VAL.departmentName;
      this.ruleForm.names = this.dataTypesTemp.val.userName;
      this.ruleForm.sexs = VAL.gender;
      this.ruleForm.works = VAL.positionName;
      this.messageList = this.dataTypesTemp.val;
    },
    //填报提交
    addTargets(formName) {
      this.$confirm("提交之后将无法更改，确定提交吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let userBasicInformationBean1 = {
            departmentName: this.ruleForm.department,
            fillTime: this.ruleForm.times,
            gender: this.ruleForm.sexs,
            id: this.ID,
            positionName: this.ruleForm.works,
            userName: this.ruleForm.names,
            year: this.ruleForm.years
          };
          console.log(userBasicInformationBean1);
          this.messageList.contentDto.userBasicInformationBean = userBasicInformationBean1;
          this.messageList.contentDto.normDtoList.forEach(item => {
            console.log(item);
            item.latitudeBeans.forEach(itemd => {
              console.log(itemd);
              itemd.fillingStatus = "2";
            });
          });
          console.log(this.messageList.contentDto);
          // console.log(userBasicInformationBean1);
          const params = {
            fillingStatus: "2",
            id: this.dataTypesTemp.val.id,
            type: "1",
            contentDto: {
              normDtoList: this.messageList.contentDto.normDtoList,
              userBasicInformationBean: this.messageList.contentDto
                .userBasicInformationBean
            }
            // userBasicInformationBean: userBasicInformationBean1
          };
          console.log(params);
          this.$refs[formName].validate(async valid => {
            if (valid) {
              const res = await putTianBao(params);
              console.log(res);
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.$refs[formName].resetFields();
              this.$emit("giveFather");
            } else {
              this.$message.error("信息填写不完整!");
              return false;
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    }
  },
  close() {
    this.centerDialogVisible = false;
    this.$emit("fatherMethod1");
  },
  closeLooks() {
    this.centerDialogVisible = false;
    this.$emit("fatherMethod1");
  },
  sureLooks() {
    this.centerDialogVisible = false;
    this.$emit("fatherMethod1");
  }
};
</script>
    <style lang="scss" scoped>
.app-container {
  height: auto;
  background-color: #f4f5fc;
}
// ::v-deep .el-textarea__inner {
//   resize: none;
// }
.liucheng {
  margin-top: 4%;
  font-weight: 800;
  font-size: 18px;
  background-color: rgba(219, 215, 215, 0.5);
  line-height: 5px;
  height: 18px;
  width: 90px;
  border-radius: 5px 5px 0 0;
  text-align: center;
  margin-left: -15px;
}
::v-deep .el-input--suffix .el-input__inner {
  height: 32px;
  font-size: 14px;
  // padding: 0px 0px 0px 5px;
  border: none;
  border-radius: 5%;
  background-color: rgba(219, 215, 215, 0.3);
}
::v-deep .el-input__icon {
  width: 14px;
}

::v-deep .el-popper[x-placement^="bottom"] {
  font-size: 8px;
  line-height: 5px;
}
::v-deep .el-table td,
.el-table th.is-leaf {
  border: none;
}
::v-deep .el-form--inline .el-form-item__content {
  vertical-align: 0;
}
// ::v-deep .el-form--inline .el-form-item__label {
//   text-align: center;
//   color: #3b95ff;
//   height: 32px;
//   line-height: 10px;
//   background: #e7f2ff;
//   opacity: 1;
// }
::v-deep .el-form--inline .el-form-item__label {
  text-align: center;
  color: #000;
  height: 32px;
  line-height: 10px;
  background: #ccc;
  opacity: 1;
}
.tops {
  text-align: center;
  color: #3b95ff;
  height: 32px;
  line-height: 10px;
  background: #e7f2ff;
  opacity: 1;
}
::v-deep .el-form-item__label {
  padding: 10px;
}
::v-deep .el-table--border th,
.el-table__fixed-right-patch {
  border: none;
}
::v-deep .el-table::before {
  background-color: #fff;
}
::v-deep .el-table__fixed-right::before,
.el-table__fixed::before {
  background-color: #fff;
}
::v-deep .el-table--border::after,
.el-table--group::after {
  background-color: #fff;
}
</style>
    